<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html>
<head>
    <%@include file="../common/base.jsp"%>
	<meta charset="utf-8" />
	<meta name ="viewport" content ="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1" />
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate">
	<meta http-equiv="expires" content="0">
	<title>取消行程</title>
    <link rel="stylesheet" type="text/css" href="${base}/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="${base}/css/global.css?version=${version}">
    <link rel="stylesheet" type="text/css" href="${base}/css/takecar.css?version=${version}">
</head>
<body>
    <div class="container-fluid cancelCar">
    	<div class="imgBox">
            <img class="img" src="${base}/images/cancel-icon.png">
        </div>
        <p class="tellme">请告诉我们原因</p>
        <p class="tellme1">我们会努力为您提供更好的服务</p>
        <ul class="reason-list" id="reason-list">
        </ul>
        <div style="height: 170px;">
            <a id="noCancelBtn" class="btn-d btn-no-cancel" href="javascript:void(0);">暂不取消</a>
            <a id="cancelBtn" class="btn-d btn-submit-disable" href="javascript:void(0);">提交</a>
            <div style="text-align: center;"><a class="cancel-href cancel-rule" id="cancel-rule" style="vertical-align: middle;">取消规则</a></div>
        </div>
    </div>
</body>
<script type="text/javascript" src="${base}/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}/js/localStorageOpt.js"></script>
<script type="text/javascript" src="${base}/plugin/layer-v3.0.3/layer.js"></script>
<script type="text/javascript" src="${base}/js/utils.js?version=${version}"></script>

<script type="text/javascript">
jQuery(document).ready(function($) {

    var $document = $(document);
    var yun=new yueajax();
//    初始化取消列表
    initPage();
    //取消规则路径
    yun.order_ajax(function(data){
        $('#cancel-rule').attr('href',base+'/h5/passenger/cancelRule?appid='+appid+'&orderUuid='+data.data.uuid);
    },function (data) {

    })
//    点击取消原因
    $document.on('touchend','.reason-list .clearfix',function(){
        var $this = $(this).find('img');
        var checked = $this.data('checked');
        var urlchecked = "${base}/images/check.png",
            urlunchecked = "${base}/images/check_round.png";
        if(checked){// 取消选中
            $this.prop('src',urlunchecked);
            $this.data('checked',false);
            $('#cancelBtn').addClass('btn-submit-disable').removeClass('btn-submit-able');
        }else{// 选中
            $this.prop('src',urlchecked).data('checked',true).addClass('reason-select');
            $this.parent().siblings('.li').find('.img').removeClass('reason-select').data('checked', false).prop('src', urlunchecked);
            $('#cancelBtn').addClass('btn-submit-able').removeClass('btn-submit-disable');
        }
    });
//    暂不取消
    $document.on('touchend','#noCancelBtn',function(){
        yun.order_ajax(function(data){
            changeUrl(data.data.subStatus,yun.orderUuid);
        },function (data) {
            layer.msg(data.msg)
        })
    });

    $document.on('touchend','.btn-submit-able',function(){
        var $checked = $('.reason-list .reason-select').eq(0);
        var text = $checked.prev().text();
        yun.ajax_md5({
            orderUuid: yun.orderUuid,
            cancelMsg:text},
            "${base}/api/v1/passenger/token/order/confirmCancel",
            function (data) {
                window.location.href = "${base}/yue/cancelNoPay?orderUuid="+yun.orderUuid;
            },
            function (data) {
                layer.msg(data.msg)
            }
        )
    });

    function initPage(){
        yun.ajax_md5({},"${base}/api/v1/passenger/tag/cancelMsg",function (data) {
            var html="",d=data.data;
            for(var i in d){
                var dc=d[i];
                html+=' <li class="clearfix li" data-uuid="'+dc.uuid+'" >' +
                    '<span class="pull-left">' + dc.tagName+'</span>' +
                    '<img data-checked="false" class="pull-right img" src="/images/check_round.png">' +
                    '</li>'
            }
            $('#reason-list').html(html);
        },function (data) {
            layer.msg(data.msg);
        })
    }
});
</script>
</html>